import 'package:flutter/material.dart';
import 'package:get/get.dart';
import 'chat_list_page.dart';
import 'contacts_page.dart';
import 'discover_page.dart';
import 'profile_page.dart';

class MainPage extends StatelessWidget {
  const MainPage({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    // 使用GetX的控制器来管理底部导航栏的状态
    final MainController controller = Get.put(MainController());

    return Scaffold(
      body: Obx(() => IndexedStack(
            index: controller.selectedIndex.value,
            children: const [
              ChatListPage(title: '聊天'),
              ContactsPage(),
              DiscoverPage(),
              ProfilePage(),
            ],
          )),
      bottomNavigationBar: Obx(() => BottomNavigationBar(
            type: BottomNavigationBarType.fixed,
            backgroundColor: Colors.white,
            selectedItemColor: Colors.green,
            unselectedItemColor: Colors.grey,
            currentIndex: controller.selectedIndex.value,
            onTap: controller.changeTabIndex,
            items: const [
              BottomNavigationBarItem(
                icon: Icon(Icons.chat_bubble_outline),
                activeIcon: Icon(Icons.chat_bubble),
                label: '聊天',
              ),
              BottomNavigationBarItem(
                icon: Icon(Icons.contact_page_outlined),
                activeIcon: Icon(Icons.contact_page),
                label: '通讯录',
              ),
              BottomNavigationBarItem(
                icon: Icon(Icons.explore_outlined),
                activeIcon: Icon(Icons.explore),
                label: '发现',
              ),
              BottomNavigationBarItem(
                icon: Icon(Icons.person_outline),
                activeIcon: Icon(Icons.person),
                label: '我',
              ),
            ],
          )),
    );
  }
}

class MainController extends GetxController {
  var selectedIndex = 0.obs;

  void changeTabIndex(int index) {
    selectedIndex.value = index;
  }
}
